import React from "react";
import { Form, Modal, Input, Radio, Switch, Select, Tooltip, Icon } from "antd";
import { usePageContext } from "../hooks/useContext";
import { useForm } from "../hooks/useForm";
import { useCreate } from "../hooks/useCreate";
import { useUpdate } from "../hooks/useUpdate";

const FormModal = ({ form }) => {
  const { handleClose } = useForm();
  useCreate({ form });
  useUpdate({ form });
  const {
    state: {
      modalOpen,
      form: { current, isEdit, handleSubmit, types }
    }
  } = usePageContext();

  const { getFieldDecorator } = form;

  return (
    <Modal
      title={isEdit ? "编辑权限" : current === 1 ? "新建主菜单" : "新建子权限"}
      centered
      visible={modalOpen}
      onOk={handleSubmit}
      onCancel={handleClose}
      okText="确认"
      cancelText="取消"
    >
      <Form layout="vertical">
        {(isEdit ? current && current.parent : current && current.id) && (
          <Form.Item label="父节点">
            {getFieldDecorator("parentId", {
              initialValue: isEdit ? current.parent.id : current.id
            })(
              <Select disabled>
                <Select.Option value={isEdit ? current.parent.id : current.id}>
                  {isEdit ? current.parent.description : current.description}
                </Select.Option>
              </Select>
            )}
          </Form.Item>
        )}
        <Form.Item label="名称">
          {getFieldDecorator("name", {
            rules: [{ required: true, message: "请输入名称！" }]
          })(
            <Input
              addonBefore={
                isEdit
                  ? `${(current && current.parent && current.parent.name) ||
                      "AUTH"}_`
                  : `${(current && current.name) || "AUTH"}_`
              }
              placeholder="输入名称..."
              disabled={isEdit}
            />
          )}
        </Form.Item>
        <Form.Item label="描述">
          {getFieldDecorator("description", {
            rules: [{ required: true, message: "请输入描述！" }]
          })(<Input placeholder="输入描述..." />)}
        </Form.Item>
        <Form.Item label="类型">
          {getFieldDecorator("type", {
            rules: [{ required: true, message: "请选择类型！" }]
          })(
            <Radio.Group
              onChange={() => {
                form.resetFields(["path"]);
              }}
              buttonStyle="solid"
              disabled={isEdit}
            >
              <Radio.Button value="MENU" disabled={types && types[0]}>
                菜单
              </Radio.Button>
              <Radio.Button value="QUERY" disabled={types && types[1]}>
                查询
              </Radio.Button>
              <Radio.Button value="MUTATION" disabled={types && types[2]}>
                变更
              </Radio.Button>
            </Radio.Group>
          )}
        </Form.Item>
        <Form.Item label="路径">
          {getFieldDecorator("path", {
            rules: [
              {
                required: form.getFieldValue("type") === "MENU",
                message: "菜单类型需要输入路径！"
              }
            ]
          })(
            <Input
              addonBefore={
                form.getFieldValue("type") === "MENU"
                  ? isEdit
                    ? `${(current && current.parent && current.parent.path) ||
                        ""}/`
                    : `${(current && current.path) || ""}/`
                  : null
              }
              placeholder="输入路径..."
              disabled={form.getFieldValue("type") !== "MENU"}
            />
          )}
        </Form.Item>
        <Form.Item
          label={
            <span>
              系统权限&nbsp;
              <Tooltip title="开启系统权限后，当前节点将无法被删除">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator("isSystem", {
            valuePropName: "checked",
            initialValue: (current && current.isSystem) || false
          })(<Switch disabled={current && current.isSystem} />)}
        </Form.Item>
      </Form>
    </Modal>
  );
};

const WrappedForm = Form.create({ name: "modal" })(FormModal);

export default WrappedForm;
